<template>
	<view>
		<view class="form_split_10"></view>
		<u-empty image="search" description="没有找到对应的信息" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<scroll-view scroll-y="true" style="height: calc(100vh - 92rpx);" @scrolltolower="scrolltolower">
					<view v-for="(item, index) in itemList" :key="index" @click="toDetail(item.jobid)">
						<view class="box_item">
							<view class="tx1">
								<view class="name">{{ item.jobname }}</view>
								<view class="right_txt">{{ item.wage_text }}</view>
							</view>
							<view class="tx2">
								{{ item.education_text }} · {{ item.experience_text }} ·
								{{ item.district_text }}
							</view>
							<view class="tx4">
								<view class="name">{{ item.companyname }}</view>
								<view class="auth_ico" v-if="parseInt(item.company_audit) === 1"></view>
								<view class="clear"></view>
							</view>
							<view class="tx3">
								{{ item.click }} 热度
								<view class="right_txt">{{ item.addtime | timeFilter }}查看</view>
							</view>
						</view>
						<view class="form_split_10"></view>
					</view>
					<u-loadmore class="u-loadmore" v-if="isloadmore" :status="finished_status" />
				</scroll-view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		formatTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'ViewJob',
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			}
		},
		data() {
			return {
				isloadmore: false,
				page: 1,
				pagesize: 15,
				itemList: [],
				finished_status: "loadmore",
				show_empty: false,
			}
		},
		created() {
			this.getData(true)
		},
		methods: {
			scrolltolower() {
				this.isloadmore = true
				this.page++
				this.getData(false)
			},
			/**
			 * 获取数据
			 */
			getData(init) {
				this.show_empty = false
				if (init === true) {
					this.page = 1
				} else {
					this.finished_status = 'loading'
				}
				http
					.get(api.personal_manage_view_job, {
						page: this.page,
						pagesize: this.pagesize
					})
					.then(res => {
						if (parseInt(res.data.code) === 200) {
							if (init === true) {
								this.itemList = [...res.data.data.items]
							} else {
								this.finished_status = 'nomore'
								this.itemList = this.itemList.concat(res.data.data.items)
							}
							// 加载状态结束
							this.loading = false

							// 数据全部加载完成
							if (res.data.data.items.length < this.pagesize) {
								this.finished_status = 'nomore'
								if (init === false) {
									this.finished_status = 'nomore'
								} else if (res.data.data.items.length === 0) {
									this.show_empty = true
								}
							}
						} else {
							this.$refs.uTips.show({
								title: res.data.message,
								type: 'error'
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			/**
			 * 跳转详情页
			 * @param id 职位id
			 */
			toDetail(id) {
				uni.navigateTo({
					url: '/commonViews/JobShow?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		width: 100%;

		.box_item {
			width: 100%;
			background-color: #ffffff;
			padding: 34rpx 32rpx 0;

			.tx4 {
				margin-bottom: 22rpx;

				.name {
					font-size: 26rpx;
					color: #999999;
					float: left;
					max-width: 620rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.auth_ico {
					float: left;
					margin-left: 14rpx;
					width: 50rpx;
					height: 36rpx;
					background-image: url($ImgUrl + "tip_ico_auth.png");
					background-repeat: no-repeat;
					background-position: 0 6rpx;
					background-size: 50rpx 26rpx;
				}
			}

			.tx3 {
				position: relative;
				width: 100%;
				border-top: 2rpx solid #fafafa;
				padding: 24rpx 210rpx 24rpx 38rpx;
				font-size: 24rpx;
				color: #999999;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				background-image: url(../static/img/hot_ico.png);
				background-repeat: no-repeat;
				background-position: 0 24rpx;
				background-size: 32rpx;

				.right_txt {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 24rpx;
					color: #333333;
				}
			}

			.tx2 {
				font-size: 28rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 14rpx;
			}

			.tx1 {
				margin-bottom: 18rpx;
				position: relative;

				.name {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					max-width: 480rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.right_txt {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 30rpx;
					color: #ff5d24;
				}
			}
		}
	}

	.notice_bar {
		width: 100%;
		padding: 22rpx 0 22rpx 70rpx;
		font-size: 24rpx;
		color: #ff6600;
		background-image: url($ImgUrl + "remind_ico.svg");
		background-color: #fffbeb;
		background-position: 32rpx center;
		background-repeat: no-repeat;
		background-size: 32rpx;
	}
</style>
